<template>
  <k-view>
    <k-view class="tabs">
      <k-scroller
        class="scroller"
        ref="scroller"
        scrollDirection="horizontal"
        :scrollEventThrottle="0"
        :bounces="false"
      >
        <k-view class="scroller-wrap">
          <k-view
            :key="item.id"
            v-for="item in list"
            class="scroller-btn"
            :class="activeId == item.id ? 'active' : ''"
            :id="item.id"
            @click="handleItemClick(item.id)"
          >
            <k-text class="scroller-text">{{ item.name }} </k-text>
          </k-view>
        </k-view>
      </k-scroller>
    </k-view>
    <k-view class="threesections">
      <page-header msg="功能定位"></page-header>
      <k-text class="liner-text"
        ><k-view class="threesections-image-wrapper">
          <k-image class="threesections-image" :src="activeUrl" /> </k-view
        >{{ articleObject[activeId].article1 }}</k-text
      >
    </k-view>
    <k-view class="threesections">
      <page-header msg="诊断设置"></page-header>
      <k-text class="liner-text">{{ articleObject[activeId].article2 }}</k-text>
    </k-view>
    <k-view class="threesections">
      <page-header msg="常见问题"></page-header>
      <k-text class="liner-text" style="white-space: break-spaces">{{
        articleObject[activeId].article3
      }}</k-text>
    </k-view>
  </k-view>
</template>

<script>
import PageHeader from '@/components/Intro/pageHeader.vue';
import { scoreDetailList } from '@/scripts/scroll.config';
import { articleObject } from '@/config/contentText';
import { getUrlSearch } from '@/utils';
import { sendClickStat } from '@/utils/stat';
import { PAGEID } from '@/config/stat';
// type activeId =
//   | 'nervous_score'
//   | 'circulatory_score'
//   | 'digesive_score'
//   | 'urinary_score'
//   | 'motor_score'
//   | 'reproductive_score'
//   | 'immune_score'
//   | 'respiratory_score'
//   | 'secretion_score';
export default {
  data() {
    return {
      activeId: 'nervous_score', //激活的tab
      list: scoreDetailList,
      articleObject,
    };
  },
  computed:{
    activeUrl(){
      const tempObj = this.list.find((item)=>item.id===this.activeId);
      return tempObj?.url||''
    }
  },
  components: {
    PageHeader,
  },
  methods: {
    handleItemClick(id) {
      sendClickStat(`${PAGEID.INTRO}.system.${id}.click`);
      this.activeId = id;
    },
  },
  mounted() {
    const query = getUrlSearch();
    this.activeId = query.id ? query.id : 'nervous_score';
    const activeElement = document.querySelector('#' + this.activeId);
    this.$refs.scroller!.bscroll.scrollToElement(activeElement);
  },
};
</script>

<style lang="less" scoped>
.tabs {
  margin-bottom: 32px;
  background-color: #ffffff;
  .scroller {
    margin-bottom: 16px;
    &-wrap {
      display: flex;
      width: 950px;
      flex-wrap: wrap;
    }
    &-btn {
      height: 60px;
      background: rgba(216, 216, 216, 0.3);
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      padding:0 16px;
      margin-right: 26px;
      margin-top: 20px;
      .scroller-text {
        color: #262626;
        font-size: 28px;
        font-weight: 400;
      }
      &.active {
        background: rgba(255, 36, 54, 0.08);
        .scroller-text {
          color: #ff2436;
        }
      }
    }
  }
}
.threesections {
  margin-bottom: 32px;
  .liner-text {
    padding: 20px;
    margin-top: 20px;
    font-family: PingFangSC-Regular;
    border-radius: 8px;
    font-size: 28px;
    color: #595959;
    background: #fafafa;
    letter-spacing: 0;
    line-height: 48px;
    font-weight: 400;
    &-title {
      font-size: 32px;
      height: 44px;
      color: #262626;
      font-weight: 500;
      line-height: 44px;
      margin-bottom: 16px;
    }
    .threesections-image-wrapper {
      width: 306px;
      clear: both;
      float: right;
      height: 280px;
      line-height: 288px;
      margin-left: 15px;
      padding: 0 0 10px 0px;
      .threesections-image {
        width: 100%;
        vertical-align: middle;
        transform: translateY(-14px);
      }
    }
  }

  &:last-of-type {
    margin-bottom: 2px;
  }
}
[theme-mode='black'] {
  .tabs {
    background-color: #1c1c1c;
    .scroller {
      &-btn {
        background: rgba(255, 255, 255, 0.06);
        .scroller-text {
          color: rgba(255, 255, 255, 0.84);
        }
        &.active {
          background: rgba(255, 36, 54, 0.08);
          .scroller-text {
            color: #ff2436;
          }
        }
      }
    }
  }
  .threesections {
    .liner-text {
      color: rgba(255, 255, 255, 0.6);
      background: #212121;
    }
    &-title {
      color: rgba(255, 255, 255, 0.84);
    }
  }
}
</style>
